<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-11-23 09:15:44
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-23 17:17:38
-->
<template>
    <div>
        <el-page-header @back="goBack" content="文章详情"> </el-page-header>
        <div class="mainBox">
            <div class="userInfo">
                <el-avatar size="medium" :src="articleForm.avatar"></el-avatar>
                <div class="infoText">
                    <div>{{ articleForm.nicheng }}</div>
                    <div class="infoTime">
                        {{ articleForm.creat_time | getTime }}
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="title">{{ articleForm.title }}</div>
                <div
                    class="contontText"
                    v-html="HTMLDecode(articleForm.content)"
                ></div>
            </div>
            <div class="tagBox">
                <div>
                    <el-tag size="small">{{ articleForm.article_name }}</el-tag>
                </div>
                <div class="readState">{{ articleForm.readnum }}阅读量</div>
            </div>
            <div class="operation">
                <div class="item">
                    <span class="iconfont icon-zujian"></span>
                    <span class="num">{{ articleForm.commentnum }}</span>
                </div>
                <div
                    class="item"
                    :class="[articleForm.is_like == 1 ? 'upActive' : '']"
                    @click="toArticleIsLike(1)"
                >
                    <span class="iconfont icon-buxihuan1"></span>
                    <span class="num">{{ articleForm.dislikenum }}</span>
                </div>
                <div
                    class="item"
                    :class="[articleForm.is_like == 2 ? 'upActive' : '']"
                    @click="toArticleIsLike(2)"
                >
                    <span class="iconfont icon-xihuan1"></span>
                    <span class="num">{{ articleForm.likenum }}</span>
                </div>
            </div>
            <div class="comment">
                <div
                    class="commentItem"
                    v-for="(item, index) in replyList"
                    :key="index"
                >
                    <div class="headerInfo">
                        <div class="Avatar">
                            <el-avatar
                                size="medium"
                                :src="item.avatar"
                            ></el-avatar>
                            <div class="AvatarName">{{ item.users_name }}</div>
                        </div>
                        <div
                            class="commentlike"
                            :class="[item.is_like == 1 ? 'upActive' : '']"
                            @click="DelReplyLike(item, index)"
                        >
                            <span class="iconfont icon-xihuan1"></span>
                            <span class="likeNum">{{ item.likenum }}</span>
                        </div>
                    </div>
                    <div class="commentContent">
                        <div>{{ item.reply_text }}</div>
                        <div class="commentState">
                            <div>{{ item.crate_time | getTime }}</div>
                            <div
                                @click="huiFu(item.article_reply_id)"
                                class="huiFu"
                            >
                                <el-tag type="info" size="small"
                                    >{{ item.answer.length }} 回复</el-tag
                                >
                            </div>
                            <div
                                class="commentDel"
                                v-if="item.user_id == user_id"
                                @click="DelReply(item, index)"
                            >
                                删除
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    @click="moreListsReply"
                    v-if="total > replyList.length"
                    class="getMore"
                >
                    -- 点击加载更多 --
                </div>
                <div class="noMore" v-else>-- 没有更多评论啦~ --</div>
            </div>
            <div class="sendComment">
                <el-divider></el-divider>
                <el-input
                    placeholder="参与评论~"
                    class="input-with-select"
                    v-model="addReplyInput"
                >
                    <el-button type="primary" slot="append" @click="AddReply"
                        >发送</el-button
                    >
                </el-input>
            </div>
            <!-- //查看回复 -->
            <el-dialog
                title="查看回复"
                :visible.sync="dialogVisible"
                width="50%"
                :before-close="handleClose"
            >
                <ArticleReplyPerson
                    :ArticleID="ArticleID"
                    :articleReplyId="articleReplyId"
                ></ArticleReplyPerson>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="handleClose"
                        >确 定</el-button
                    >
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import {
    getArticleList,
    getListsReply,
    articleIsLike,
    saveDelReplyLike,
    saveAddReplyLike,
    toDelReply,
    saveAddReply
} from "@/api/personalHomepage/index";
import { getFormatTime } from "@/utils/timeUtils";
import ArticleReplyPerson from "./articleReplyPerson";
export default {
    props: ["ArticleID"],
    components: {
        ArticleReplyPerson
    },
    data() {
        return {
            dialogVisible: false,
            //评论
            page: 1,
            pagesize: 8,
            total: 0,
            addReplyInput: "", //评论内容
            replyList: [],
            //详情
            articleForm: {},
            //回复评论
            articleReplyId: ""
        };
    },
    computed: {
        user_id() {
            return this.$store.getters.userInfo.id;
        }
    },
    filters: {
        //时间格式
        getTime(val) {
            if (val != "") {
                return getFormatTime(val * 1000);
            }
        }
    },
    watch: {
        ArticleID: {
            handler(id) {
                var query = {
                    users_type: 1,
                    article_id: id
                };
                this.getArticleData(query);
                this.ListsReply(id);
            },
            // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
            immediate: true
        }
    },
    methods: {
        goBack() {
            this.$emit("delBack");
        },
        handleClose() {
            this.getArticleData({
                users_type: 1,
                article_id: this.ArticleID
            });
            this.page = 1;
            this.ListsReply(this.ArticleID);
            this.dialogVisible = false;
        },
        async getArticleData(query) {
            var list = await getArticleList(query);
            console.log("文章详情：", list);
            if (list.code == 200) {
                this.articleForm = list.data.data[0];
            } else {
                this.$message.error(list.msg);
            }
        },
        async ListsReply(id) {
            var query = {
                page: this.page,
                pagesize: this.pagesize,
                article_id: id
            };
            var list = await getListsReply(query);
            if (list.code == 200) {
                this.total = list.data.total;
                this.replyList = list.data.data;
            }
            console.log("文章评论：", list);
        },
        async moreListsReply() {
            this.page = this.page + 1;
            var query = {
                page: this.page,
                pagesize: this.pagesize,
                article_id: this.ArticleID
            };
            var list = await getListsReply(query);
            if (list.code == 200) {
                this.total = list.data.total;
                this.replyList = this.replyList.concat(list.data.data);
            }
            console.log("文章评论：", list);
        },
        //文章点赞
        async toArticleIsLike(type) {
            var query = {
                article_id: this.articleForm.article_id,
                is_like: type
            };
            if (this.articleForm.is_like == type) {
                query.is_like = 0;
            }
            var list = await articleIsLike(query);
            if (list.code == 200) {
                this.getArticleData({
                    users_type: 1,
                    article_id: this.ArticleID
                });
            }
            console.log(list);
        },
        //评论点赞
        async DelReplyLike(item, index) {
            var query = {
                article_id: this.ArticleID,
                article_reply_id: item.article_reply_id
            };
            var list;
            if (item.is_like == 1) {
                list = await saveDelReplyLike(query);
                if (list.code == 200) {
                    this.replyList[index].is_like = null;
                    this.replyList[index].likenum =
                        this.replyList[index].likenum - 1;
                }
            } else {
                list = await saveAddReplyLike(query);
                if (list.code == 200) {
                    this.replyList[index].is_like = 1;
                    this.replyList[index].likenum =
                        this.replyList[index].likenum + 1;
                }
            }
            console.log("评论点赞：", list);
        },
        //删除评论
        DelReply(item, index) {
            this.$confirm("此操作将永久删除该评论, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(async () => {
                    var query = {
                        article_reply_id: item.article_reply_id,
                        article_id: this.ArticleID
                    };
                    var list = await toDelReply(query);
                    if (list.code == 200) {
                        this.replyList.splice(index, 1);
                        this.articleForm.commentnum--;
                        this.$message({
                            type: "success",
                            customClass: "customClass",
                            message: "删除成功!"
                        });
                    }
                    console.log("删除评论:", list);
                })
                .catch(() => {});
        },
        //发表评论
        async AddReply() {
            if (this.addReplyInput.trim() == "") {
                return this.$message({
                    message: "评论内容不能为空",
                    type: "warning"
                });
            }
            var query = {
                text: this.addReplyInput,
                article_id: this.ArticleID
            };
            var list = await saveAddReply(query);
            if (list.code == 200) {
                this.addReplyInput = "";
                this.page = 1;
                this.ListsReply(this.ArticleID);
                this.$message({
                    type: "success",
                    customClass: "customClass",
                    message: "评论成功!"
                });
            }
            console.log("发表评论:", list);
        },
        //查看回复
        async huiFu(article_reply_id) {
            this.dialogVisible = true;
            this.articleReplyId = article_reply_id;
        },
        HTMLDecode(text) {
            var html;
            if (text) {
                html = text.replace(/&lt;/g, "<").replace(/&gt;/g, ">");
            }
            return html;
        }
    }
};
</script>

<style scoped lang="scss">
.mainBox {
    width: 100%;
    min-height: 700px;
    padding-top: 40px;
    position: relative;

    .userInfo {
        display: flex;
        align-items: center;

        .infoText {
            margin-left: 15px;

            .infoTime {
                color: rgb(141, 140, 140);
            }
        }
    }

    .content {
        width: 100%;
        margin-top: 15px;

        .title {
            font-size: 17px;
            font-weight: 600;
        }

        .contontText {
            margin-top: 18px;
        }
    }

    .tagBox {
        display: flex;
        align-items: center;
        margin-top: 18px;

        .readState {
            font-size: 14px;
            margin-left: 20px;
            color: #8b8a8a;
        }
    }

    .operation {
        margin-top: 18px;
        display: flex;
        flex-direction: row-reverse;

        .item {
            width: 100px;
            height: 30px;
            border: 1px solid #d1cfcf;
            border-radius: 15px;
            margin-right: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #999999;
            cursor: pointer;

            .num {
                margin-left: 8px;
            }
        }
    }

    .comment {
        width: 100%;
        margin-top: 30px;

        .commentItem {
            width: 100%;
            margin-bottom: 25px;

            .headerInfo {
                display: flex;
                justify-content: space-between;

                .Avatar {
                    display: flex;
                    align-items: center;

                    .AvatarName {
                        margin-left: 8px;
                    }
                }

                .commentlike {
                    color: #8b8a8a;
                    cursor: pointer;

                    .likeNum {
                        margin-left: 5px;
                        margin-right: 10px;
                    }
                }
            }

            .commentContent {
                margin-left: 35px;
                margin-top: 10px;

                .commentState {
                    color: #8b8a8a;
                    font-size: 14px;
                    margin-top: 20px;
                    display: flex;
                    align-items: center;

                    div {
                        margin-right: 20px;
                    }

                    .huiFu {
                        cursor: pointer;
                    }

                    .commentDel {
                        color: #f2546a;
                        cursor: pointer;
                    }
                }
            }
        }
    }

    .sendComment {
        width: 100%;
        margin-top: 60px;
        // position: absolute;
        // bottom: 0;
        // left: 0;
        // right: 0;
    }

    .upActive {
        color: #ff4e78 !important;
        border-color: #ff4e78 !important;
    }
}

.getMore {
    color: #8b8a8a;
    width: 100%;
    text-align: center;
    cursor: pointer;
    &:hover {
        color: rgb(20, 102, 255);
    }
}

.noMore {
    color: #8b8a8a;
    width: 100%;
    text-align: center;
}
</style>
